import { defineView } from "@/routers/tools.mjs";

/**
 * @type {DefineView}
 */
const AttrItempropView = defineView({
  /**
   * @implements {ng.IController}
   */
  controller: class AttrItempropViewController {
    static $inject = ["$scope", "$element"];

    /**
     * @param {ng.IScope} $scope
     * @param {ng.IAugmentedJQuery} $element
     */
    constructor($scope, $element) {
      this.$scope = $scope;
      this.$element = $element;
    }

    /**
     * @type {string | undefined}
     */
    pathData;

    $onInit() {
      let isStart = false;
      this.img.on("load", () => {
        if (!isStart) {
          isStart = true;
          console.log("图片加载中");
          return;
        }
        console.log("图片加载成功，已渲染！");
      });

      this.img.on("error", () => {
        console.log("图片加载失败！");
      });
      for (const n of ["HTML", "CSS", "JavaScript"]) {
        const c = this.$element.find(`area[alt='${n}']`).attr("coords");
        if (!c) continue;
        console.log(c, "c");
        const points = c.split(",").map(Number);
        let pathData = "";

        for (let i = 0; i < points.length; i += 2) {
          const x = points[i];
          const y = points[i + 1];
          pathData += i === 0 ? `M${x},${y}` : ` L${x},${y}`;
        }
        pathData += " Z";
        const targetPathData = `pathData_${n.toUpperCase()}`;
        // eslint-disable-next-line no-warning-comments
        // @ts-ignore - should be fine
        this[targetPathData] = pathData;
      }
    }

    handleClick() {
      console.log("AttrItempropViewController", this.$scope);
    }

    get img() {
      return this.$element.find("img");
    }
  },
  controllerAs: "$ctrl",
  template: /* HTML */ html`
    <div itemscope itemtype="//schema.org/Product">
      <span itemprop="name">Panasonic White 60L Refrigerator</span>
      <img
        src="panasonic-fridge-60l-white.png"
        alt="panasonic-fridge-60l-white"
        width="400"
        height="400"
      />
      <div
        itemprop="aggregateRating"
        itemscope
        itemtype="//schema.org/AggregateRating"
      >
        <meter itemprop="ratingValue" min="0" value="3.5" max="5">
          Rated 3.5/5
        </meter>
        (based on <span itemprop="reviewCount">11</span>
        customer reviews)
      </div>
    </div>
    <hr />
    <div>
      <a
        href="//developer.mozilla.org/docs/Web/"
        target="_blank"
        class="inline-block relative"
      >
        <!-- usemap 将发出 请求头 x-client-ip: number.number.number.number -->
        <img
          ismap
          usemap="#infographic"
          src="mdn-info2.png"
          alt="MDN infographic"
          width="260"
          height="222"
        />
        <map name="infographic">
          <area
            shape="poly"
            coords="130,147,200,107,254,219,130,228"
            href="//developer.mozilla.org/docs/Web/HTML"
            alt="HTML"
          />
          <area
            shape="poly"
            coords="130,147,130,228,6,219,59,107"
            href="//developer.mozilla.org/docs/Web/CSS"
            alt="CSS"
          />
          <area
            shape="poly"
            coords="130,147,200,107,130,4,59,107"
            href="//developer.mozilla.org/docs/Web/JavaScript"
            alt="JavaScript"
          />
        </map>
        <svg
          xmlns="//www.w3.org/2000/svg"
          width="260"
          height="232"
          class="block absolute top-0"
        >
          <path fill="cyan" ng-attr-d="{{::$ctrl.pathData_HTML}}"></path>
          <path fill="purple" ng-attr-d="{{::$ctrl.pathData_CSS}}"></path>
          <path fill="red" ng-attr-d="{{::$ctrl.pathData_JAVASCRIPT}}"></path>
        </svg>
      </a>
    </div>
    ${DebugButtonHTML("$ctrl")}
  `,
});

export default AttrItempropView;

if (import.meta.webpackHot) {
  import.meta.webpackHot.decline();
}
